{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    Teacher Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <!-- Custom styles for this template -->
    <link href="{% static "laioffer/css/dashboard.css" %}" rel="stylesheet">
    <link href="{% static "hljs/default.min.css" %}" rel="stylesheet">
    <script type="text/javascript" src="{% static "hljs/highlight.min.js" %}"></script>
    <style type="text/css">
        .markdownx-preview{
            box-shadow: 0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);
            min-height: 206px;
        }
        .markdownx-editor{
            width: 100%
        }
    </style>
{% endblock stylesheets %}

{% block content %}

    <div class="container-fluid">
      <div class="row">

        {% include "_sidebar.html" %}

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">Teacher Dashboard</h1>

          {% include "_message.html" %}

          <h2 class="sub-header">
            {% if object %}
                Edit content "{{ object.title }}"
            {% else %}
                Add a new content
            {% endif %}
          </h2>

            <div class="content-info">
                <h2>Content info</h2>

                <form action="" method="post" enctype="multipart/form-data">
                    {{ form|crispy }}
                    {% csrf_token %}
                    <p><input type="submit" value="Save content"></p>
                </form>
                {{ form.media }}
            </div>

        </div> <!-- /main -->
      </div> <!-- /row -->
    </div> <!-- /container -->

    <script type="text/javascript">
        hljs.initHighlightingOnLoad();
        let element = document.getElementsByClassName('markdownx');

        Object.keys(element).map(key =>

            element[key].addEventListener('markdownx.update', event => {
                console.log(event.detail);
                s = document.querySelector('div.markdownx-preview pre code');
                console.log(s);
                if (s !== null)
                {
                    hljs.highlightBlock(s);
                    // hljs.lineNumbersBlock(s);
                }
            })
        );
    </script>

{% endblock content %}
